<!--
  -    Copyright (c) 2018-2025, infomng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: infomng
  -->

<template>
  <div class="execution">
    <!--上行页面-->
    <div style="text-align: center" v-if="parametersFlg==='up'">
      <!--源配置-->
      <el-card class="box-card" >
        <div slot="header" >
          <span>源配置</span>
        </div>
        <el-row :gutter="20">
          <el-col :gutter="20">
            <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
              参数名：<el-input v-model="parameterName" placeholder="请填写参数名" style="width: 200px!important;" filterable></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :gutter="20">
            <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
              数据源：<el-select v-model="dsId" placeholder="请选择数据源" @change="dsChange"  filterable>
              <el-option
                v-for="item in dataSourceList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :gutter="20">
            <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
              数据表：<el-select  v-model="tableName" placeholder="请选择数据表" @change="tbChange" filterable clearable>
              <el-option
                v-for="item in dataTableList"
                :key="item.tableName"
                :label="item.tableName"
                :value="item.tableName" />
            </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :gutter="20">
            <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
              表字段：<el-select v-model="columnName" placeholder="请选择表字段" @change="colChange"  filterable clearable>
              <el-option
                v-for="item in dataColumnList"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName" />
            </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :gutter="20">
            <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
              排序字段：<el-select v-model="orderField" placeholder="请选择排序字段"  filterable clearable>
              <el-option
                v-for="item in dataColumnList"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName" />
            </el-select>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <!--目标配置-->
      <el-card class="box-card" >
        <div slot="header" >
          <span>目标配置</span>
        </div>
        <el-row :gutter="20">
          <el-col :gutter="20">
            <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
              参数名：<el-input v-model="targetParameterName" placeholder="请填写参数名" style="width: 200px!important;" filterable></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :gutter="20">
            <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
              数据源：<el-select v-model="targetDsId" placeholder="请选择数据源" @change="dsTargetChange"  filterable>
              <el-option
                v-for="item in targetDataSourceList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :gutter="20">
            <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
              数据表：<el-select  v-model="targetTableName" placeholder="请选择数据表" @change="tbTargetChange" filterable clearable>
              <el-option
                v-for="item in targetDataTableList"
                :key="item.tableName"
                :label="item.tableName"
                :value="item.tableName" />
            </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :gutter="20">
            <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
              表字段：<el-select v-model="targetColumnName" placeholder="请选择表字段" @change="colTargetChange"  filterable clearable>
              <el-option
                v-for="item in targetDataColumnList"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName" />
            </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :gutter="20">
            <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
              排序字段：<el-select v-model="targetOrderField" placeholder="请选择排序字段"  filterable clearable>
              <el-option
                v-for="item in targetDataColumnList"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName" />
            </el-select>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <!--提交保存-->
      <div style="text-align: center;margin-top: 20px">
        <el-button type="primary"  style="margin-top: 20px"  @click="saveConfigure">保存</el-button>
      </div>
    </div>
    <!--下行页面-->
    <basic-container v-if="parametersFlg==='down'">
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
            参数名：<el-input v-model="parameterName" placeholder="请填写参数名" style="width: 200px!important;" filterable></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
            数据源：<el-select v-model="dsId" placeholder="请选择数据源" @change="dsChange"  filterable>
              <el-option
                v-for="item in dataSourceList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
            数据表：<el-select  v-model="tableName" placeholder="请选择数据表" @change="tbChange" filterable clearable>
              <el-option
                v-for="item in dataTableList"
                :key="item.tableName"
                :label="item.tableName"
                :value="item.tableName" />
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
            表字段：<el-select v-model="columnName" placeholder="请选择表字段" @change="colChange"  filterable clearable>
              <el-option
                v-for="item in dataColumnList"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName" />
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
            排序字段：<el-select v-model="orderField" placeholder="请选择排序字段"  filterable clearable>
            <el-option
              v-for="item in dataColumnList"
              :key="item.columnName"
              :label="item.columnName"
              :value="item.columnName" />
          </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 20px">
            <el-button type="primary" @click="saveConfigure">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import { getTbList, fetchSelectDsList,getTableList} from '@/api/pfoc/datascoure'
import { updateConfigure } from '@/api/pfoc/realitylinedeviceconfig'
import { addDownObj, putDownObj } from '@/api/pfoc/devicedownparameter'
import { addUpObj, putUpObj } from '@/api/pfoc/deviceupparameter'

    export default {
        name: 'configure',
        props: {
            id:{//参数ID
                type:String,
            },
            parametersFlg:{//参数类型
              type:String
            },
            parameterNames:{//参数名
              type:String
            },
            deviceParameterId:{//设备参数配置ID
              type:String
            },
            deviceSn:{//设备编码
              type:String
            },
            deviceName:{ //设备名称
              type:String
            },

            dsIds:{//数据源ID
                type:String,
            },
            tableNames:{//表名称
                type:String,
            },
            columnNames:{//列字段
                type:String,
            },
            orderFields:{//排序字段
                type:String,
            },

            targetParameterNames:{//目标参数名
              type:String,
            },
            targetDsIds:{//目标数据源ID
              type:String,
            },
            targetTableNames:{//目标表名称
              type:String,
            },
            targetColumnNames:{//目标列字段
              type:String,
            },
            targetOrderFields:{//目标排序字段
              type:String,
            },

        },
        data() {
            return {
                parameterName:null,//参数名
                dsId:null,//数据源ID
                dsName:null,//数据源名称
                tableName:null,//表名称
                columnName:null,//列字段
                comments:null,//列备注
                orderField:null,//排序字段
                dataSourceList: [],//数据源集合
                dataTableList:[],//数据源对应的表集合
                dataColumnList:[],//数据表对应的列集合

                targetParameterName:null,//目标参数名
                targetDsId:null,//目标数据源ID
                targetDsName:null,//目标数据源名称
                targetTableName:null,//目标表名称
                targetColumnName:null,//目标列字段
                targetComments:null,//目标列备注
                targetOrderField:null,//目标排序字段
                targetDataSourceList:[],//目标数据源集合
                targetDataTableList:[],//目标数据源对应的表集合
                targetDataColumnList:[],//目标数据表对应的列集合
            }
        },
        created() {
            //获取数据源
            this.getDataSourceList();
        },
        computed: {
        },
        methods: {
            //回显
            configureInit(){
                this.parameterName = this.parameterNames;
                if(!this.validatenull(this.dsIds)){//判断回显数据源不为空
                    var t = this;
                    fetchSelectDsList().then(response => {
                        this.dataSourceList = response.data.data
                        this.dsId =this.dsIds;//设置回显默认值
                        this.dataSourceList.find((item) => {
                            if (item.id === this.dsIds) {
                                this.dsName=item.name;//设置数据源名称
                            }
                        });
                        const obj = {
                            dsName:this.dsName
                        }
                        var tt = t;
                        getTbList(obj).then(response => {
                            t.dataTableList = response.data.data
                            if(!t.validatenull(t.tableNames)) {//判断回显数据表不为空
                                t.tableName = t.tableNames;
                                const params = {
                                    dsName:t.dsName,
                                    tableName:t.tableName
                                }
                                //重新查找对应列
                                getTableList(params).then(response => {
                                    tt.dataColumnList = response.data.data
                                    tt.orderField = tt.orderFields;//排序字段回显
                                    if(!tt.validatenull(tt.columnNames)){//判断回显数据列不为空
                                        tt.columnName = tt.columnNames;
                                        var comments = null;//列备注
                                        //这里的一层if是因为三个下拉框调取的一个方法  用参数str区分不同的下拉框 二种是使用一层for加一个Array.find方法
                                        tt.dataColumnList.find((item) => {
                                            if (item.columnName === tt.columnName) {
                                                comments=item.comments
                                            }
                                        })
                                        //重新更新列备注数据
                                        if(!tt.validatenull(comments)) {
                                            tt.comments = comments;
                                        }else{
                                            tt.comments=null;
                                        }
                                    }
                                })
                            }
                        })
                    })
                }
                if(this.parametersFlg==='up'){//上行数据目标数据源相关回显
                  this.targetParameterName = this.targetParameterNames;
                  console.log(this.targetDsIds)
                  if(!this.validatenull(this.targetDsIds)){//判断回显数据源不为空
                    var t = this;
                    fetchSelectDsList().then(response => {
                      this.targetDataSourceList = response.data.data
                      this.targetDsId =this.targetDsIds;//设置回显默认值
                      this.targetDataSourceList.find((item) => {
                        if (item.id === this.targetDsIds) {
                          this.targetDsName=item.name;//设置数据源名称
                        }
                      });
                      const obj = {
                        dsName:this.targetDsName
                      }
                      var tt = t;
                      getTbList(obj).then(response => {
                        t.targetDataTableList = response.data.data
                        if(!t.validatenull(t.targetTableNames)) {//判断回显数据表不为空
                          t.targetTableName = t.targetTableNames;
                          const params = {
                            dsName:t.targetDsName,
                            tableName:t.targetTableName
                          }
                          //重新查找对应列
                          getTableList(params).then(response => {
                            tt.targetDataColumnList = response.data.data
                            tt.targetOrderField = tt.targetOrderFields;//排序字段回显
                            if(!tt.validatenull(tt.targetColumnNames)){//判断回显数据列不为空
                              tt.targetColumnName = tt.targetColumnNames;
                              var comments = null;//列备注
                              //这里的一层if是因为三个下拉框调取的一个方法  用参数str区分不同的下拉框 二种是使用一层for加一个Array.find方法
                              tt.targetDataColumnList.find((item) => {
                                if (item.columnName === tt.targetColumnName) {
                                  comments=item.comments
                                }
                              })
                              //重新更新列备注数据
                              if(!tt.validatenull(comments)) {
                                tt.targetComments = comments;
                              }else{
                                tt.targetComments=null;
                              }
                            }
                          })
                        }
                      })
                    })
                  }
                }
            },
            //获取数据源
            getDataSourceList() {
               fetchSelectDsList().then(response => {
                    this.dataSourceList = response.data.data;
                    this.targetDataSourceList = response.data.data;
                    if (this.dataSourceList.length === 0) {
                        return new Promise((resolve, reject) => {
                            reject('数据源信息列表为空,请添加数据源')
                        })
                    }
               /*     if (this.dataSourceList.length > 0 && this.dsId ==null) {
                        this.dsId = this.dataSourceList[0].id;
                        this.dsName = this.dataSourceList[0].name;
                        this.getDataTableList();
                    }*/
                })
            },

            //数据源选择
            dsChange(val){
                if(this.validatenull(val)){
                    this.dsName=null;
                }else{
                    this.dataSourceList.find((item) => {
                        if (item.id === val) {
                            this.dsName=item.name;
                        }
                    });
                    this.getDataTableList();//重新查询对应表
                }
            },
            //获取数据源对应表
            getDataTableList() {
              const param = {
                dsName:this.dsName
              }
              getTbList(param).then(response => {
                this.dataTableList = response.data.data
              }).catch((err) => {
                this.$message.error(err)
              })
            },
            //数据表选择
            tbChange(val){
              if(this.validatenull(val)){
                this.tableName=null;
              }else{
                this.dataTableList.find((item) => {
                  if (item.tableName === val) {
                    this.tableName=item.tableName;
                  }
                });

                this.getDataColumnList();//重新查找对应列
              }
              //清空字段选择以及数据集合
              this.dataColumnList = [];
              this.columnName=null;
            },
            //获取数据源对应表的对应列
            getDataColumnList(){
              const param = {
                dsName:this.dsName,
                tableName:this.tableName
              }
              getTableList(param).then(response => {
                this.dataColumnList = response.data.data
              }).catch((err) => {
                this.$message.error(err)
              })
            },
            //表字段选择
            colChange(val){
              var columnName = val;//列字段
              var comments = null;//列备注
              //这里的一层if是因为三个下拉框调取的一个方法  用参数str区分不同的下拉框 二种是使用一层for加一个Array.find方法

              this.dataColumnList.find((item) => {
                if (item.columnName === columnName) {
                  if(!this.validatenull(comments)) {
                    comments=item.comments
                  }
                }
              })

              //重新更新列备注数据
              if(!this.validatenull(comments)) {
                this.comments = comments;
              }else{
                this.comments=null;
              }
            },
            //目标数据源选择
            dsTargetChange(val){
              if(this.validatenull(val)){
                this.targetDsName=null;
              }else{
                this.targetDataSourceList.find((item) => {
                  if (item.id === val) {
                    this.targetDsName=item.name;
                  }
                });
                this.getTargetDataTableList();//重新查询对应表
              }
            },
            //目标获取数据源对应表
            getTargetDataTableList() {
              const param = {
                dsName:this.targetDsName
              }
              getTbList(param).then(response => {
                this.targetDataTableList = response.data.data
              }).catch((err) => {
                this.$message.error(err)
              })
            },
            //目标数据表选择
            tbTargetChange(val){
              if(this.validatenull(val)){
                this.targetTableName=null;
              }else{
                this.targetDataTableList.find((item) => {
                  if (item.tableName === val) {
                    this.targetTableName=item.tableName;
                  }
                });

                this.getTargetDataColumnList();//重新查找对应列
              }
              //清空字段选择以及数据集合
              this.targetDataColumnList = [];
              this.targetColumnName=null;
            },
            //获取目标数据源对应表的对应列
            getTargetDataColumnList(){
              const param = {
                dsName:this.targetDsName,
                tableName:this.targetTableName
              }
              getTableList(param).then(response => {
                this.targetDataColumnList = response.data.data
              }).catch((err) => {
                this.$message.error(err)
              })
            },
            //表字段选择
            colTargetChange(val){
              var columnName = val;//列字段
              var comments = null;//列备注
              //这里的一层if是因为三个下拉框调取的一个方法  用参数str区分不同的下拉框 二种是使用一层for加一个Array.find方法
              this.targetDataColumnList.find((item) => {
                if (item.columnName === columnName) {
                  if(!this.validatenull(comments)) {
                    comments = item.comments
                  }
                }
              })
              //重新更新列备注数据
              if(!this.validatenull(comments)) {
                this.targetComments = comments;
              }else{
                this.targetComments=null;
              }
              console.log( comments)
            },

            //保存
            saveConfigure(){
                if(this.validatenull(this.parameterName)){
                    this.$message.warning("请输入参数名称。")
                    return;
                }
                if(this.validatenull(this.dsName)){
                    this.$message.warning("请选择数据源。")
                    return;
                }
                if(this.validatenull(this.tableName)){
                    this.$message.warning("请选择数据表")
                    return;
                }
                if(this.validatenull(this.columnName)){
                    this.$message.warning("请选择表字段")
                    return;
                }
                if(this.validatenull(this.orderField)){
                    this.$message.warning("请选择排序字段")
                    return;
                }
                if(this.validatenull(this.id)){//新增
                  var obj ={
                    id:null,///参数ID
                    deviceParameterId:this.deviceParameterId,//设备参数表ID
                    deviceName: this.deviceName,//设备名称
                    deviceSn: this.deviceSn,//设备编码
                    parameterName:this.parameterName,//参数名称
                    dataStore:this.dsId,//数仓ID
                    tableName:this.tableName,//表名称
                    columnName:this.columnName,//列名
                    remarks:this.comments,//列备注
                    orderField:this.orderField //排序字段
                  }
                  if(this.parametersFlg==='up'){//上行参数添加
                    obj.targetParameterName=this.targetParameterName;//参数名称
                    obj.targetDataStore=this.targetDsId;//数仓ID
                    obj.targetTableName=this.targetTableName;//表名称
                    obj.targetColumnName=this.targetColumnName;//列名
                    obj.targetRemarks=this.targetComments;//列备注
                    obj.targetOrderField=this.targetOrderField; //排序字段
                    addUpObj(obj).then(response => {
                      this.$message.success("保存成功。")
                      this.$emit('closeConfigurePage');//关闭页面
                    }).catch((err) => {
                      this.$message.error(err)
                    });

                  }else if (this.parametersFlg==='down'){//下行参数添加
                    addDownObj(obj).then(response => {
                      this.$message.success("保存成功。")
                      this.$emit('closeConfigurePage');//关闭页面
                    }).catch((err) => {
                      this.$message.error(err)
                    });
                  }

                }else{//编辑
                  var obj ={
                    id:this.id,//参数ID
                    deviceParameterId:this.deviceParameterId,//设备参数表ID
                    deviceName: this.deviceName,//设备名称
                    deviceSn: this.deviceSn,//设备编码
                    parameterName:this.parameterName,//参数名称
                    dataStore:this.dsId,//数仓ID
                    tableName:this.tableName,//表名称
                    columnName:this.columnName,//列名
                    remarks:this.comments,//列备注
                    orderField:this.orderField //排序字段
                  }
                  if(this.parametersFlg==='up'){//上行参数更新
                    obj.targetParameterName=this.targetParameterName;//参数名称
                    obj.targetDataStore=this.targetDsId;//数仓ID
                    obj.targetTableName=this.targetTableName;//表名称
                    obj.targetColumnName=this.targetColumnName;//列名
                    obj.targetRemarks=this.targetComments;//列备注
                    obj.targetOrderField=this.targetOrderField; //排序字段
                    debugger;
                    console.log(obj)
                    putUpObj(obj).then(response => {
                      this.$message.success("保存成功。")
                      this.$emit('closeConfigurePage');//关闭页面
                    }).catch((err) => {
                      this.$message.error(err)
                    });
                  }else if (this.parametersFlg==='down'){//下行参数更新
                    putDownObj(obj).then(response => {
                      this.$message.success("保存成功。")
                      this.$emit('closeConfigurePage');//关闭页面
                    }).catch((err) => {
                      this.$message.error(err)
                    });
                  }

                }

            }

        }
    }
</script>

<style scoped>
/deep/ .text {
  font-size: 14px;
}

/deep/ .item {
  margin-bottom: 18px;
}
/deep/ .box-card {
  width: 40%;
  border: 1px solid #ccc !important;
  margin-top: 30px;
  margin-left: 5%;
  margin-right: 4%;
  float: left;
}

</style>

